
<template>
  <a-modal
    :title="title"
    :width="1280"
    ref="editTeam"
    :visible="visible"
    :confirmLoading="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-row :gutter="12">
      <a-col :md="4">
        <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
          <a-tree-node key="0-0" title="安布雷拉生物科技">
            <a-tree-node key="0-0-0" title="商务中心（200）" is-leaf />
            <a-tree-node key="0-0-1" title="龙华商务（10）" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-1" title="研发中心">
            <a-tree-node key="0-1-0" title="IT部门" is-leaf />
            <a-tree-node key="0-1-1" title="福田商务（10）" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-2" title="安布雷拉生物科技">
            <a-tree-node key="0-2-0" title="商务中心（200）" is-leaf />
            <a-tree-node key="0-2-1" title="龙华商务（10）" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-3" title="研发中心">
            <a-tree-node key="0-3-0" title="IT部门" is-leaf />
            <a-tree-node key="0-3-1" title="福田商务（10）" is-leaf />
          </a-tree-node>
        </a-directory-tree>
      </a-col>
      <a-col :md="10">
        <a-row style="height:50px">
          <!-- <a-col :md="8">
            <span>安布雷拉生物科技</span>
          </a-col>-->
          <a-col :md="8">
            <a-input placeholder="成员姓名"></a-input>
          </a-col>
          <a-col :md="8" :style="{marginLeft:'5px'}">
            <a-button type="primary">搜索</a-button>
          </a-col>
        </a-row>

        <a-table
          row-key="index"
          size="small"
          :columns="leftTableColumns"
          :dataSource="mockData"
          :pagination="{ pageSize: 10 }"
        >
          <span slot="range" slot-scope="text, record">
            <trend :flag="record.status === 0 ? 'up' : 'down'">{{ text }}%</trend>
          </span>
        </a-table>
      </a-col>
      <a-col :md="10">
        <a-row style="height:50px">
          <a-col :md="8">已选择的人员</a-col>
        </a-row>
        <a-table
          row-key="index"
          size="small"
          :columns="rightTableColumns"
          :dataSource="rightTableData"
          :pagination="{ pageSize: 10 }"
        >
          <span slot="range" slot-scope="text, record">
            <trend :flag="record.status === 0 ? 'up' : 'down'">{{ text }}%</trend>
          </span>
        </a-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { postForm, postAction, putAction, getAction, deleteAction } from '@/api/manage'
import pick from 'lodash.pick'
import difference from 'lodash/difference'
const mockData = []
for (let i = 0; i < 20; i++) {
  mockData.push({
    index: 1,
    key: _.random(10000000),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
  })
}

const leftTableColumns = [
  { title: '序号', dataIndex: 'index' },
  { title: '姓名', dataIndex: 'title' },
  { title: '岗位', dataIndex: 'post' },
  { title: '手机', dataIndex: 'phone' },
]
const rightTableColumns = [
  {
    dataIndex: 'title',
    title: 'Name',
  },
]

const tableBasicColumns = [
  { title: '序号', dataIndex: 'index' },
  { title: '姓名', dataIndex: 'title' },
  { title: '岗位', dataIndex: 'post' },
  { title: '手机', dataIndex: 'phone' },
]

export default {
  name: 'DeviceDetail',
  components: {},
  data() {
    return {
      title: '新增',
      form: this.$form.createForm(this),
      visible: false,
      data: {},
      url: {},
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
      mockData: [],
      rightTableData: [],
      targetKeys: [],
      leftTableColumns: [
        ...tableBasicColumns,
        {
          title: '操作',
          dataIndex: 'e',
          customRender: (text, record, index) => {
            if (_.find(this.rightTableData, { key: record.key })) {
              return (
                <div>
                  <a-icon type="check" style="color:#0061FF" />
                </div>
              )
            }
            return (
              <div onClick={this.toRight.bind(this, text, record, index)}>
                <a-icon type="double-right" style="color:#0061FF" />
              </div>
            )
          },
        },
      ],
      rightTableColumns: [
        ...tableBasicColumns,
        {
          title: '操作',
          dataIndex: 'e',
          customRender: (text, record, index) => {
            return (
              <div onClick={this.toClean.bind(this, text, record, index)}>
                <a-icon type="close" style="color:#0061FF" />
              </div>
            )
          },
        },
      ],
    }
  },
  created() {},
  mounted() {
    this.getMock()
  },
  methods: {
    toRight(text, record, index) {
      this.rightTableData.push(record)
    },
    toClean(text, record, index) {
      this.rightTableData.splice(index, 1)
    },
    handleOk(e) {
      this.visible = false
    },
    handleCancel(e) {
      this.visible = false
    },

    show(record) {
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(record, 'detail', 'email', 'address'))
      })
    },

    getMock() {
      const targetKeys = []
      const mockData = []
      for (let i = 0; i < 20; i++) {
        const data = {
          key: `${i + 1}`,
          index: `${i + 1}`.toString(),
          title: `content${i + 1}`,
          post: 'web前端',
          phone: '15768254752',
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        }
        if (data.chosen) {
          targetKeys.push(data.key)
        }
        mockData.push(data)
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys)
      this.targetKeys = targetKeys
    },
    onSelect(keys, event) {
      console.log('Trigger Select', keys, event)
    },
    onExpand() {
      console.log('Trigger Expand')
    },
  },
}
</script>
<style lang="less" scoped>
.device-detail {
  padding: 0 24px 24px;
  max-height: 600px;
  overflow: auto;
  background: #ffffff;
  /deep/ .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
    padding: 0 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
}
</style>